<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SuperSlider插件使用-基础</title>
    <script src="javascript/jquery-1.8.3.min.js"></script>
    <script src="javascript/jquery.SuperSlide.2.1.2.js"></script>
    <style>
        .slideTxtBox {
            width: 450px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .slideTxtBox .hd {
            height: 30px;
            line-height: 30px;
            background: #f4f4f4;
            padding: 0 20px;
            border-bottom: 1px solid #ddd;
            position: relative;
        }

        .slideTxtBox .hd ul {
            float: left;
            position: absolute;
            left: 20px;
            top: -1px;
            height: 32px;
        }

        .slideTxtBox .hd ul li {
            float: left;
            padding: 0 15px;
            cursor: pointer;
        }

        .slideTxtBox .hd ul li.on {
            height: 30px;
            background: #fff;
            border: 1px solid #ddd;
            border-bottom: 2px solid #fff;
        }

        .slideTxtBox .bd ul {
            padding: 15px;
            zoom: 1;
        }

        .slideTxtBox .bd li {
            height: 24px;
            line-height: 24px;
        }

        .slideTxtBox .bd li .date {
            float: right;
            color: #999;
        }

    </style>
</head>

<body>
    <div class="slideTxtBox">
        <div class="hd">
            <ul>
                <li>教育</li>
                <li>培训</li>
                <li>出国</li>
            </ul>
        </div>
        <div class="bd">
            <ul>
                <li><a href="http://www.SuperSlide2.com" target="_blank">SuperSlide2.0正式发布！</a></li>
                ...
            </ul>
            <ul>
                <li><a href="http://www.SuperSlide2.com" target="_blank">名师教作文：３妙招巧写高分</a></li>
                ...
            </ul>
            <ul>
                <li><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
                ...
            </ul>
        </div>
    </div>
    <script>
        $('.slideTxtBox').slide();

    </script>
</body>

</html>
